<template>
	<radio-group 
	@change="change" 
	class="QS-Radio"
	ref="QS-Radio"
	:class="getClass" 
	:style="getStyle">
		<label 
		class="QS-Radio_label"
		:style="{
			marginRight: space,
			marginBottom: space,
			width: itemWidth
		}"
		v-for="(radioItem, radioIndex) in itemArray"
		:key="radioIndex">
			<radio 
			:value="radioItem.value || radioItem" 
			:checked="val==String(radioItem.value || radioItem)" 
			:disabled="radioItem.disabled" 
			:color="radioItem.color || getColor" />
			<text :style="{ fontSize: getFontSize + 'px' }">{{radioItem.name || radioItem}}</text>
		</label>
	</radio-group>
</template>

<script>
	import QSComponentMixin from '../../mixins/QS-Components-Mixin.js';
	import QSFormElMixin from '../../js/QS-Form/mixins/QS-Form-El-Mixin.js';
	let props;
	try{
		props = require('@/QS-UI-CONFIG/components/QS-Radio/js/props.js');
	}catch(e){
		//TODO handle the exception
		props = {};
	}
	const componentType = 'QS-Radio';
	const QSComponentMixinRes = QSComponentMixin({ 
		componentType,
		nodeName: '.QS-Radio'
	});
	const QSFormElMixinRes = QSFormElMixin({ componentType });
	export default {
		mixins: [
			QSComponentMixinRes.mixin,
			QSFormElMixinRes.mixin,
		],
		props: {
			// #ifdef MP-ALIPAY
			...QSComponentMixinRes.props,
			// #endif
			itemArray: {
				type: Array,
				default: () => []
			},
			color: {
				type: String,
				default: ''
			},
			space: {
				type: String,
				default: '8px'
			},
			itemWidth: {
				type: String,
				default: ''
			},
			...props,
			// #ifdef MP-ALIPAY
			...QSFormElMixinRes.props,
			// #endif
		},
		computed: {
			getColor() {
				return this.color || this.themes[this.theme || 'primary'];
			}
		}
	};
</script>

<style scoped>
	.QS-Radio{
		/* #ifndef APP-NVUE */
		display: flex;
		flex-wrap: wrap;
		/* #endif */
		flex-direction: row;
	}
	.QS-Radio_label{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
</style>
